<ng-template #template>
  <div [class]="question.getItemClass(model)">
    <label [class]="question.cssClasses.label">
        <input [type]="question.inputType" [attr.name]="question.questionName" [attr.value]="model.value" [id]="question.getItemId(model)" [required]="question.inputRequiredAttribute" [attr.aria-label]="model.locText.renderedHtml" [attr.aria-invalid]="question.ariaInvalid" [attr.aria-errormessage]="question.ariaErrormessage"
        (change)="onChange($event)" [checked]="question.isItemSelected(model)" [disabled]="!question.getItemEnabled(model)" [readonly]="question.isReadOnlyAttr" [class]="question.cssClasses.itemControl"
        />
        <div [class]="question.cssClasses.itemDecorator">
            <div [class]="question.cssClasses.imageContainer">
              <span *ngIf="question.cssClasses.checkedItemDecorator" [class]="question.cssClasses.checkedItemDecorator" aria-hidden="true">
                <svg *ngIf="question.cssClasses.checkedItemSvgIconId" [class]="question.cssClasses.checkedItemSvgIcon" [iconName]="question.cssClasses.checkedItemSvgIconId" [size]="'auto'" sv-ng-svg-icon></svg>
              </span>
              <img *ngIf="model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'image'" [class]="question.cssClasses.image" [attr.src]="model.locImageLink.renderedHtml" [attr.width]="question.renderedImageWidth" [attr.height]="question.renderedImageHeight" [attr.alt]="model.locText.renderedHtml"  [style.objectFit]="question.imageFit" (load)="question.onContentLoaded(model, $event)" (error)="model.onErrorHandler()"/>
              <video *ngIf="model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'video'" controls [class]="question.cssClasses.image" [attr.src]="model.locImageLink.renderedHtml" [attr.width]="question.renderedImageWidth" [attr.height]="question.renderedImageHeight" [style.objectFit]="question.imageFit" (loadedmetadata)="question.onContentLoaded(model, $event)" (error)="model.onErrorHandler()"></video>
              <div *ngIf="!model.locImageLink.renderedHtml || model.contentNotLoaded" [class]="question.cssClasses.itemNoImage" [style.width]="question.renderedImageWidth + 'px'" [style.height]="question.renderedImageHeight + 'px'" [style.objectFit]="question.imageFit">
                <svg *ngIf="question.cssClasses.itemNoImageSvgIconId" [class]="question.cssClasses.itemNoImageSvgIcon" [iconName]="question.cssClasses.itemNoImageSvgIconId" [size]="48" sv-ng-svg-icon></svg>
              </div>
            </div>
            <span *ngIf="question.showLabel" [class]="question.cssClasses.itemText" [model]="model.locText" sv-ng-string></span>
        </div>
    </label>
  </div>
</ng-template>